<template>
    <div class="custom-tree-container">
      <el-tree
        style="max-width: 600px"
        :data="dataSource"
        show-checkbox
        node-key="id"
        default-expand-all
        :expand-on-click-node="false"
      >
        <template #default="{ node, data }">
          <span class="custom-tree-node">
            <span>{{ node.label }}</span>
            <span>
              <a @click="append(data)" v-if="node.level == 2"> 增加 </a>
              <a style="margin-left: 8px" @click="remove(node, data)" v-if="node.level == 3"> 删除 </a>
            </span>
          </span>
        </template>
      </el-tree>
    </div>
  </template>
  
  <script setup>
  import { onMounted, ref } from 'vue'
  import { getTrees, save, del } from '@/api/reasons'
  import { ElMessageBox, ElMessage } from 'element-plus'
  let id = 1000
  
const append = (data) => {
    console.log(data)

    ElMessageBox.prompt('请输入新的类型', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        // inputPattern:
        // /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
        // inputErrorMessage: 'Invalid Email',
    }).then(({ value }) => {
            add(data, value)
            // ElMessage({type: 'success', message: `Your email is:${value}`,})
        }).catch(() => {
            // ElMessage({type: 'info', message: 'Input canceled',})
        })
    
}
  
  const remove = (node, data) => {
    del({symNo: data.id}).then(res => {
        if (res.code == 200) {
            ElMessage({type: 'success', message: '删除成功',})
            const parent = node.parent
            const children = parent.data.children || parent.data
            const index = children.findIndex((d) => d.id === data.id)
            children.splice(index, 1)
            dataSource.value = [...dataSource.value]
        } else {
            ElMessage.error(res.data)
        }
    })

  }
  

  const dataSource = ref([])

  onMounted(() => {
    loadTreeData()
  })

  const loadTreeData = () => {
    getTrees().then(res => {
        if (res.code == 200) {
            const trs = new Array()
            trs.push(res.data)
            dataSource.value = trs
        }
    })
  }

  const add = (pData, value) => {
    console.log(pData)
    console.log(value)
    save({symName: value, gNo: pData.id}).then(res => {
        if (res.code == 200) {
            ElMessage({type: 'success', message: '添加成功',})
            const newChild = { id: res.data, label: value, children: [] }
            if (!pData.children) {
                pData.children = []
            }
            pData.children.push(newChild)
            dataSource.value = [...dataSource.value]
        } else {
            ElMessage.error('添加失败')
        }
    })
  }

  </script>
  
  <style>
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
  </style>
  